<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Id 格式转换小工具</title>
    <style>
        #new {
            margin-top: 10px;
        }

        div.box {
            margin: 5px;
            padding: 5px;
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <h1>简单文本处理，转换 Id 格式。</h1>
    <div class="box">
        <textarea id="raw" cols="100" rows="20"></textarea><br>
        <dl>
            <dt>原始分隔符</dt>
            <dd>
                <label for="raw-new_line">换行符</label>
                <input type="radio" name="raw_sep" id="raw-new_line">&emsp;
                <label for="raw-tab">TAB</label>
                <input type="radio" name="raw_sep" id="raw-tab">&emsp;
                <label for="raw-other">其他</label>
                <input type="radio" name="raw_sep" id="raw-other" checked>
                <input type="text" name="raw_sep_other" id="raw-other_sep" value=";">
            </dd>
            <dt>新的分隔符</dt>
            <dd>
                <label for="new-new_line">换行符</label>
                <input type="radio" name="new_sep" id="new-new_line" checked>&emsp;
                <label for="new-tab">TAB</label>
                <input type="radio" name="new_sep" id="new-tab">&emsp;
                <label for="new-other">其他</label>
                <input type="radio" name="new_sep" id="new-other">
                <input type="text" id="new-other_sep">
            </dd>
            <dt>前缀与后缀</dt>
            <dd>
                <label for="handle-prefix">处理前缀</label>
                <input type="radio" name="pre_suf" id="handle-prefix" checked>&emsp;
                <label for="handle-suffix">处理后缀</label>
                <input type="radio" name="pre_suf" id="handle-suffix">&emsp;
                <label for="handle-none">均不处理</label>
                <input type="radio" name="pre_suf" id="handle-none">
            </dd>
            <dd><b>假如处理：</b>
                <label for="raw-pre-suf">原</label>
                <input type="text" id="raw-pre-suf" value="t">
                <label for="neww-pre-suf">新</label>
                <input type="text" id="new-pre-suf" value="">
            </dd>
        </dl>

        <button onclick="convert('raw', 'new')">转换</button><br>
        <textarea id="new" cols="100" rows="20"></textarea>
    </div>
    <script>
        // document.querySelector('#raw').value = 't13-265;t3-227;t2-6;t3-159;t5-236;t1-273;t12-5';
        dqs('#raw').value = 't13-265;t3-227;t2-6;t3-159;t5-236;t1-273;t12-5';

        function convert(id_raw, id_new) {
            var raw_sep = '', new_sep = '', pre_suf = '', raw_pre_suf = '', new_pre_suf = '';
            // 原始分隔符
            if (dqs('#raw-new_line').checked) {
                raw_sep = '\n';
            } else if (dqs('#raw-tab').checked) {
                raw_sep = '\t';
            } else {
                raw_sep = dqs('#raw-other_sep').value;
            }
            // 新的分隔符
            if (dqs('#new-new_line').checked) {
                new_sep = '\n';
            } else if (dqs('#new-tab').checked) {
                new_sep = '\t';
            } else {
                new_sep = dqs('#new-other_sep').value;
            }
            
            var raw = dqs('#raw').value.replace(/\n/g, raw_sep);
            var data = raw.split(raw_sep).filter(d => d.match(/\S/));

            // 前缀与后缀
            var re = false;
            if (dqs('#handle-prefix').checked) {
                re = new RegExp('^' + dqs('#raw-pre-suf').value);
            } else if (dqs('#handle-suffix').checked) {
                re = new RegExp(dqs('#raw-pre-suf').value + '$');
            }
            if (re) {
                data = data.map(d => d.replace(re, dqs('#new-pre-suf').value));
            }
            dqs('#new').value = data.join(new_sep);
        }

        function dqs(selector) {
            return document.querySelector(selector);
        }
    </script>
</body>

</html>